<!--  -->
<template>
  <div class="horizontal-container">
    <scroll class="scroll-wrapper"
    :probe-type="3"
    :is-scroll-x="true"> 
      <div class="scroll-content">
        <div class="scroll-item" v-for="(item, index) in emojis" :key="index">
          {{ item }}
        </div>
      </div>
    </scroll>
  </div>
</template>

<script>
import Scroll from '@/components/common/scroll/BScroll.vue'

export default {
  data() {
    return {
      emojis: [
        "👉🏼 😁 😂 🤣 👈🏼",
        "😄 😅 😆 😉 😊",
        "😫 😴 😌 😛 😜",
        "👆🏻 😒 😓 😔 👇🏻",
        "😑 😶 🙄 😏 😣",
        "😞 😟 😤 😢 😭",
        "🤑 😲 ☹️ 🙁 😖",
        "👍 👎 👊 ✊ 🤛",
        "☝️ ✋ 🤚 🖐 🖖",
        "👍🏼 👎🏼 👊🏼 ✊🏼 🤛🏼",
        "☝🏽 ✋🏽 🤚🏽 🖐🏽 🖖🏽",
        "🌖 🌗 🌘 🌑 🌒",
      ],
    };
  },
  components: {
    Scroll
  }
};
</script>
<style scoped lang='scss'>
.horizontal-container{
  .scroll-wrapper{
    position: relative;
    width: 90%;
    white-space: nowrap;
    border: 3px solid #42b983;
    border-radius: 5px;
    overflow: hidden;
    .scroll-content{
      display: inline-block;
    }
    .scroll-item{
      height: 50px;
      line-height: 50px;
      font-size: 24px;
      display: inline-block;
      text-align: center;
      padding: 0 10px;
    }
  }
}
</style>